
<template>
  <div>
        <div v-for="(it,ind) in dataForm" :key="ind">
        <div style="display:flex;margin-top: 10px;">
            <el-input v-model="it.title"  placeholder="请输入内容标题" style="width:50%"></el-input>
            <el-select
                v-model="it.type"
                placeholder="请选择类型"
                clearable
                @change="chan"
                style="width:20%;margin-left: 10px;"
              >
                <el-option
                  v-for="item in wj_type"
                  :key="item.type"
                 :label="item.name"
                 :value="item.type"
              ></el-option>
            </el-select>
        </div>

            <div style="display:flex;margin-top: 5px;"  v-for="(items,index) in it.content" :key="index">
              <div>
                  <el-input v-model="items.name" auto-complete="off" placeholder="请输入选项内容" style="width:50%"></el-input>
                    <el-button
                    @click="addplice(it,index)"
                    icon="el-icon-plus"
                      circle
                      ></el-button>
                    <el-button
                      @click="delplice(it,index)"
                        icon="el-icon-minus"
                      circle
                    ></el-button>
              </div>      
              
            </div>
             <div v-if="it.content.length==0">
                <el-button
               @click="addplice(it,-1)"
               icon="el-icon-plus"
                circle
                ></el-button>
              </div>

            <el-button
               @click="add(ind)"
                type="primary"
                 style="margin-top:10px"
                >添加选项</el-button>
            <el-button
                @click="delp(ind)"
                type="primary"
                 style="margin-top:10px"
             >删除选项</el-button>
             </div>
    <div slot="footer" class="dialog-footer cen">
      <el-button @click.native="closedialog">取消</el-button>
      <el-button type="primary" @click.native="submit">确定</el-button>
    </div>

  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {
      form:{},
      dataForm:[{title: "",type:'',content:[],}],
      wj_type:[{name:'单选',type:0},{name:'多选',type:1},{name:'输入框',type:2}],
      type:'',
      id:''
    }
  },
  methods: {
    chan(val){
      this.type=val
    },
    addplice(item,index){
      // let obj = JSON.parse(JSON.stringify(item));
      let newObj = {
        name:'',
        type:false,
        text:''
      };
      item.content.push(newObj) 
    },
    delplice(item,index) {
      item.content.splice(index, 1);
    },
    add(index){
      let obj = JSON.parse(JSON.stringify(this.dataForm));
      let newObj = {
        title:'',
        type:'',
        content:[]
      };
      obj.splice(index + 1, 0, newObj);
      this.dataForm = obj;
    },
    delp(index){
      this.dataForm.splice(index, 1);
    },
    //查询列表
    handldy(){
      let params = {
        // CID: row.CID,
        VID: this.form.VID,
        dataForm:true,
        status: 1,
        sort: { name: 1 },
      };
      this.$api.wxNotic.weixin_answer_list(params).then((res) => {
              this.dataForm=res.data[0].dataForm
              this.id=res.data[0]._id
              // console.log(res.data[0]._id)
      });
    },
    //提交
    submit(){
      let params={
        VID: this.form.VID,
        status: 1,
        name:'1',
        dataForm:this.dataForm,
        _id:this.id
      }
      this.$api.wxNotic.weixin_answer_operate({ where: params }).then((res) => {
            if(res.code==0){
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
              this.$emit("handleSave");
                
            }else{
               this.$message({
                  message: "操作失败, " + res.msg,
                  type: "error",
                });
            }
      });
    },
    closedialog() {
      this.$emit("handleSave");
    },
  },
  async mounted() {
    this.form = this.data
    await this.handldy()
  },
};
</script>

<style lang="scss" scoped>
.cen {
  text-align: center;
}
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.mr20 {
  margin-right: 20px;
}
.title{
  font-size: 18px;
  font-weight: bold;
}
.mytext{
  margin: 10px 10px 10px 0px;
}
.votes{
  margin: 10px 40px 0 10px;
}
.myvote{
  position: absolute;
  right: 10px;
}
.row{
  display: flex;
  flex-direction: row;
}
</style>
